<template>
    <view class="index" :style="pageStyle">
        <!-- 组件 -->
        <template>
            <w-search :pageMeta="state.title" :percent="percent" :isLargeScreen="isLargeScreen" />
        </template>
        <template>
            <w-banner :content="state.banner" @change="handleBanner" />
        </template>
        <view class="notice">
            <image src="/static/images/icon/notice-icon.png" class="w-[170rpx] h-[40rpx]"></image>
            <view class="flex1">
                <u-notice-bar
                    :volume-icon="false"
                    :list="state.notices"
                    mode="vertical"
                    bg-color="#ffffff"
                    color="#555555"
                ></u-notice-bar>
            </view>
            <navigator url="/pages/news/news?cate_id=1">
                <u-icon
                    name="arrow-right-double"
                    labelPos="left"
                    size="24"
                    color="#888888"
                    label-color="#888888"
                    label="更多"
                ></u-icon>
            </navigator>
        </view>
        <view class="nav-list">
            <w-nav :content="state.nav.content" :styles="state.nav.styles" />
        </view>
        <view class="index-total wrap" :style="state.index_total_bg">
            <u-row gutter="0">
                <u-col span="3">
                    <view class="stat-item">
                        <view class="stat-label">发布数量</view>
                        <view class="stat-number">{{ state.publish_total }}</view>
                    </view>
                </u-col>
                <u-col span="3">
                    <view class="stat-item">
                        <view class="stat-label">帮扶中数量</view>
                        <view class="stat-number">{{ state.help_total }}</view>
                    </view>
                </u-col>
                <u-col span="3">
                    <view class="stat-item">
                        <view class="stat-label">已完成数量</view>
                        <view class="stat-number">{{ state.complete_total }}</view>
                    </view>
                </u-col>
                <u-col span="3">
                    <view class="stat-item">
                        <view class="stat-label">人才库名录</view>
                        <view class="stat-number">{{ state.talent_total }}</view>
                    </view>
                </u-col>
            </u-row>
        </view>
        <view class="projects-view">
            <view class="left-header">
                <view class="start-icon"></view>
                <text class="section-title">最新需求信息</text>
                <view class="tabs-container">
                    <u-tabs
                        :list="projects_tabs"
                        :is-scroll="false"
                        v-model="current"
                        active-color="#222222"
                        bg-color="transparent !import"
                        inactive-color="#777777"
                        @change="changeType"
                        :height="60"
                        item-width="100"
                        :show-bar="false"
                        :font-size="26"
                    >
                    </u-tabs>
                </view>
            </view>
            <view class="projects-content">
                <projects-card v-for="item in state.projects" :key="item.id" :item="item" />
            </view>
        </view>
        <view class="key-banner">
            <navigator :url="`/pages/key_project/key_project`" open-type="switchTab">
                <image
                    :src="getImageUrl(state.key_banner[0]?.image)"
                    class="w-[690rpx] h-[220rpx]"
                />
            </navigator>
        </view>
        <view class="article">
            <view class="left-header">
                <view class="start-icon"></view>
                <text class="section-title">活动大厅</text>
                <view>
                    <navigator :url="`/pages/news/news?type=3`">
                        <u-icon
                            name="arrow-right-double"
                            label-pos="left"
                            size="24"
                            color="#888888"
                            label-color="#888888"
                            label="查看更多"
                        ></u-icon>
                    </navigator>
                </view>
            </view>
            <activity-card
                v-for="item in state.activities"
                :key="item.id"
                :news-id="item.id"
                :item="item"
            />
        </view>

        <!-- 返回顶部按钮 -->
        <u-back-top
            :scroll-top="scrollTop"
            :top="100"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        >
        </u-back-top>

        <!--  #ifdef MP  -->
        <!--  微信小程序隐私弹窗  -->
        <MpPrivacyPopup></MpPrivacyPopup>
        <!--  #endif  -->
    </view>
</template>

<script setup lang="ts">
import { getIndex, getIndexProjects } from '@/api/shop'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()
// #ifdef MP
import MpPrivacyPopup from './component/mp-privacy-popup.vue'
import UTabs from '@/uni_modules/vk-uview-ui/components/u-tabs/u-tabs.vue'
import ActivityCard from '@/components/activity-card/activity-card.vue'
// #endif
const isLargeScreen = ref<boolean>(false)
const appStore = useAppStore()
const state = reactive<{
    title: string
    notices: any[]
    activities: any[]
    key_banner: any[]
    banner: any[]
    index_bg: string
    nav: any[]
    index_total_bg: {}
    publish_total: number
    help_total: number
    complete_total: number
    talent_total: number
    projects: any[]
}>({
    title: '',
    notices: [],
    activities: [],
    key_banner: [],
    banner: [],
    index_bg: '',
    nav: [],
    index_total_bg: {},
    publish_total: 0,
    help_total: 0,
    complete_total: 0,
    talent_total: 0,
    projects: []
})
const projects_tabs = [
    {
        name: '最新'
    },
    {
        name: '求助中'
    },
    {
        name: '帮扶中'
    },
    {
        name: '已完成'
    }
]
const current = ref<string>('')
const getProjects = async (type: string) => {
    try {
        const data = await getIndexProjects({ type: type })
        state.projects = data || []
    } catch (error) {
        console.error('Failed to fetch projects:', error)
        state.projects = []
    }
}
const changeType = (string: string) => {
    current.value = string
    getProjects(string)
}
const scrollTop = ref<number>(0)
const percent = ref<number>(0)

const pageStyle = computed(() => {
    return { 'background-image': `url(${getImageUrl(state.index_bg)})` }
})
const handleBanner = (url: string) => {
    state.bannerImage = url
}

const getData = async () => {
    const data = await getIndex()
    const notices = data.notices
    state.notices = notices.map((item: any) => item.title)
    state.activities = data.activities
    state.key_banner = data.key_banner
    state.banner = data.banner
    state.index_bg = data.index_bg
    state.title = appStore.config.website.web_name
    state.nav = JSON.parse(data.nav)[0]
    state.index_total_bg = { backgroundImage: `url(${getImageUrl(data.index_total.bg_image)})` }
    state.publish_total = data.index_total.publish
    state.help_total = data.index_total.help
    state.complete_total = data.index_total.complete
    state.talent_total = data.index_total.talent
}

onPageScroll((event: any) => {
    scrollTop.value = event.scrollTop
    const top = uni.upx2px(100)
    percent.value = event.scrollTop / top > 1 ? 1 : event.scrollTop / top
    if (percent.value == 1) {
        state.title = ''
    } else {
        state.title = appStore.config.website.web_name
    }
})

onLoad(() => {
    getData()
    getProjects('')
    current.value = ''
})
</script>

<style lang="scss" scoped>
.index {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    width: 100%;
    transition: all 1s;
    min-height: calc(100vh - env(safe-area-inset-bottom));
}

.article-title {
    &::before {
        content: '';
        width: 8rpx;
        height: 34rpx;
        display: block;
        margin-right: 10rpx;
        @apply bg-primary;
    }
}

.notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    margin: 20rpx;
    padding: 10rpx 20rpx;
    border-radius: 16rpx;
}

.flex1 {
    flex: 1;
}

.index-total {
    margin: 20rpx;
    //background: url('/static/images/index_total_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 180rpx;

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40rpx 0;
        color: white;

        .stat-number {
            font-size: 36rpx;
            font-weight: bold;
        }

        .stat-label {
            font-size: 24rpx;
            margin-bottom: 15rpx;
        }
    }
}

.start-icon {
    background: #1e88f8;
    width: 15rpx;
    height: 40rpx;
    border-top-right-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
}

.left-header {
    display: flex;
    align-items: center;
    margin: 20rpx 20rpx 20rpx 0;

    .section-title {
        font-size: 36rpx;
        font-weight: bold;
        margin-left: 10rpx;
        flex: 1;
        color: #222222;
    }

    .tabs-container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}

.key-banner {
    margin: 20rpx;
    text-align: center;
}
</style>
